<template>
  <div class="login_container">
    <!-- 左侧  -->
    <div class="left_container">
        <div class="logo_container">
            <img src="@/resources/login/logo.png">
            <div>开源管理系统</div>
        </div>
        <div class="logo_container">

</div>
    </div>
    <!-- 右侧  -->
    <div class="right_container">
        <!-- 登录面板 （记住密码存样式显示异常问题）  -->
        <div class="login_span">
          <div class="login_form_span">
            <div class="input_span user_name_span">
              <div class="icon_tip_span">
                <div class="icon_span">
                  <i class="fas fa-user fa-2x fa-fw"></i>
                </div>
                <label class="label_tips" v-bind:class="userNameSize">用户名</label>
                <input
                  type="text"
                  v-model="loginForm.userName"
                  @focus="selectInput(0)"
                  @blur="blurInput(0)"
                />
              </div>
              <span class="spin_line" v-bind:class="userNameLine"></span>
            </div>
            <div class="input_span password_span">
              <div class="icon_tip_span">
                <div class="icon_span">
                  <i class="fas fa-lock fa-2x fa-fw"></i>
                </div>
                <label class="label_tips" v-bind:class="passwordSize">密码</label>
                <input
                  type="password"
                  v-model="loginForm.password"
                  autocomplete="new-password"
                  @focus="selectInput(1)"
                  @blur="blurInput(1)"
                />
              </div>
              <span class="spin_line" v-bind:class="passwordLine"></span>
            </div>
            <div class="input_span authcode_span">
              <div class="authcode_input_span">
                <label class="label_tips" v-bind:class="authCodeSize">验证码</label>
                <input
                  type="text"
                  maxlength="4"
                  v-model="loginForm.authCode"
                  @focus="selectInput(2)"
                  @blur="blurInput(2)"
                />
                <span class="spin_line" v-bind:class="authCodeLine"></span>
              </div>
              <div class="authcode_image_span">
                <img :src="authCode.imageBase64" @click="refreshAuthCode" />
              </div>
            </div>
            <p class="error_span">{{ errorMsg }}</p>
            <div class="button_span" @click="userLogin">登录</div>
          </div>
        </div>
    </div>
  </div>
</template>
<script>
import _ from "lodash";
import axios from 'axios';
import { config } from "@/js/config.js";
import { tool } from "@/js/tool.js";

let loginApp = null;

export default {
  name: "userLogin",
  data: function () {
    return {
      userNameLine: {
        spin_line_select: false,
        spin_line_unselect: false,
      },
      passwordLine: {
        spin_line_select: false,
        spin_line_unselect: false,
      },
      authCodeLine: {
        spin_line_select: false,
        spin_line_unselect: false,
      },
      userNameSize: {
        label_large: false,
        label_small: false,
      },
      passwordSize: {
        label_large: false,
        label_small: false,
      },
      authCodeSize: {
        label_large: false,
        label_small: false,
      },
      loginForm: {
        userName: "",
        password: "",
        authCode: "",
      },
      authCodeUrlAction: "/basic/auth/imageAuthCode",
      authCodeUrl: config.requestConfig.httpBaseUrl + "/basic/auth/imageAuthCode",
      errorMsg: "",
      authCode: {
        "sessionId": "",
        "imageBase64": ""
      }
    };
  },
  methods: {
    userLogin: function () {
      userLogin(this);
    },
    refreshAuthCode: function () {
      getAuthCode(this);
    },
    selectInput: function (value) {
      app.errorMsg = "";
      //选择输入框
      if (value == 0) {
        //用户名
        this.userNameLine = {
          spin_line_select: true,
          spin_line_unselect: false,
        };
        this.userNameSize = {
          label_large: false,
          label_small: true,
        };
      } else if (value == 1) {
        //密码
        this.passwordLine = {
          spin_line_select: true,
          spin_line_unselect: false,
        };
        this.passwordSize = {
          label_large: false,
          label_small: true,
        };
      } else {
        this.authCodeLine = {
          spin_line_select: true,
          spin_line_unselect: false,
        };
        this.authCodeSize = {
          label_large: false,
          label_small: true,
        };
      }
    },
    blurInput: function (value) {
      this.errorMsg = "";
      if (value == 0) {
        //用户名
        this.userNameLine = {
          spin_line_select: false,
          spin_line_unselect: true,
        };
        if (this.loginForm.userName == null || this.loginForm.userName == "") {
          this.userNameSize = {
            label_large: true,
            label_small: false,
          };
        }
      } else if (value == 1) {
        this.passwordLine = {
          spin_line_select: false,
          spin_line_unselect: true,
        };
        if (this.loginForm.password == null || this.loginForm.password == "") {
          this.passwordSize = {
            label_large: true,
            label_small: false,
          };
        }
      } else {
        this.authCodeLine = {
          spin_line_select: false,
          spin_line_unselect: true,
        };
        if (this.loginForm.authCode == null || this.loginForm.authCode == "") {
          this.authCodeSize = {
            label_large: true,
            label_small: false,
          };
        }
      }
    },
  },
  mounted: function() {
    loginApp = this;
    getAuthCode(this);
    if(this.loginForm.userName){
      this.userNameLine.spin_line_select = false;
      this.userNameLine.spin_line_unselect = false;
      this.userNameSize.label_large = false;
      this.userNameSize.label_small = true;
    }
    if(this.loginForm.password){
      this.passwordLine.spin_line_select = false;
      this.passwordLine.spin_line_unselect = false;
      this.passwordSize.label_large = false;
      this.passwordSize.label_small = true;
    }
    if(this.loginForm.authCode){
      this.authCodeLine.spin_line_select = false;
      this.authCodeLine.spin_line_unselect = false;
      this.authCodeSize.label_large = false;
      this.authCodeSize.label_small = true;
    }
  },
  beforedestoy() {
    
  }
};

document.onkeydown = function (e) {
  if (e.key == 'Enter') {
    userLogin(loginApp);
  }
};

/**
 * 获取图片验证码
 *
 * @author zhouhui
 * @since 1.0.0
 */
function getAuthCode(app){
  axios({
    method: 'GET',
    url: app.authCodeUrl,
    params: {
      "sessionId": app.authCode.sessionId
    }
  }).then(function (response) {
    if(response && response.status == 200 && response.data.code == '0000'){
      const result = response.data.data;
      app.authCode.sessionId = result.sessionId;
      app.authCode.imageBase64 = "data:image/png;base64," + result.imageBase64;
    }
  }).catch(function (error) {
      console.error(error);
  });
}

/**
 * 用户登录的功能
 *
 * @author zhouhui
 * @since 20210202
 */
function userLogin(app) {
  if (app.loginForm.userName == null || app.loginForm.userName == "") {
    app.errorMsg = "请输入用户名！";
    return;
  }
  if (app.loginForm.password == null || app.loginForm.password == "") {
    app.errorMsg = "请输入密码！";
    return;
  }
  if (app.loginForm.authCode == null || app.loginForm.authCode == "") {
    app.errorMsg = "请输入验证码！";
    return;
  }

  var url = "/user/login";
  var data = {
    authCode: app.loginForm.authCode,
    code: app.loginForm.userName,
    password: app.loginForm.password,
    sessionId: app.authCode.sessionId
  };

  tool.formRequest(
    url,
    data,
    function () {
      app.errorMsg = "服务器异常，请稍后重试！";
    },
    function (data) {
      if (data.code == "0000") {
        //存储用户信息
        let userId = data.data.userId;
        //判断当前登录用户和之前是否一样，如果不一样，清空缓存
        let storteUserId = localStorage.getItem("userId");
        if(userId != storteUserId){
          localStorage.clear();
        }

        localStorage.setItem("token", data.data.token);
        localStorage.setItem("user", JSON.stringify(data.data));
        localStorage.setItem("userId", userId);

        document.onkeydown = null;//取消键盘事件

        app.$router.push({ path: "/mainView", replace: true }).catch(function () {});
      } else {
        getAuthCode(app);
        if (data.code == "0007") {
          app.loginForm.authCode = "";
        } else if (data.code == "0008") {
          app.loginForm.authCode = "";
          app.loginForm.userName = "";
          app.loginForm.password = "";
        }
        app.errorMsg = data.message;
      }
    }
  );
}
</script>

<style scoped>
* {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,
    "\5B8B\4F53", sans-serif;
}
body,
html {
  width: 100%;
  height: 100%;
}
.login_container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  background-image: url('@/resources/login/login.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}
.login_container .left_container {
  display: flex;
  flex-direction: column;
  width: 70%;
  height: 100%;
}
.left_container .logo_container {
  display: flex;
  width: 100%;
  height: 60px;
  margin-top: 10px;
  overflow: hidden;
}

.logo_container img {
  width: auto;
  height: 100%;
  margin-left: 20px;
}
.logo_container div{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  font-weight: 600;
  font-size: 28px;
  color: #303133;
}

.login_container .right_container {
  display: flex;
  justify-content: start;
  align-items: center;
  width: 30%;
  height: 100%;
}

.right_container .login_span {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 360px;
  height: 420px;
  border-radius: 5px;
  box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, 0.2);
  background: #ffffff;
}
.login_span > .login_form_span {
  display: flex;
  flex-direction: column;
  margin-top: 70px;
  width: 300px;
  height: 320px;
  margin-right: auto;
  margin-left: auto;
}
.input_span {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 60px;
  color: #409eff;
}
.user_name_span:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0px;
  left: 0;
  z-index: 3;
  background: rgba(0, 0, 0, 0.1);
}
.password_span:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0px;
  left: 0;
  z-index: 3;
  background: rgba(0, 0, 0, 0.1);
}
.icon_tip_span {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.icon_tip_span > .icon_span {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
  width: 48px;
  height: 48px;
}
.icon_tip_span > .label_tips {
  position: relative;
  width: 100%;
  height: 100%;
  margin-left: 5px;
  line-height: 60px;
  font-size: 20px;
  font-weight: 300;
  cursor: default;
}
.icon_tip_span > input {
  position: absolute;
  width: 80%;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  font-weight: 300;
  border: 0;
  margin: 0;
  padding: 0;
  bottom: 5px;
  left: 48px;
  text-decoration: none;
  list-style-type: none;
  outline: none;
  background: none;
}

.password_span {
  margin-top: 30px;
}
.authcode_span {
  margin-top: 30px;
}
.button_span {
  width: 100%;
  height: 40px;
  margin-top: 20px;
  border-radius: 8px;
  background: #409eff;
  color: #ffffff;
  font-size: 24px;
  line-height: 40px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 10px;
  cursor: pointer;
  text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2);
}
.button_span:hover {
  background: #5eacfd;
}

.input_span .spin_line {
  position: absolute;
  width: 0%;
  height: 1px;
  background: #f66d95;
  bottom: 0px;
  z-index: 4;
}

.input_span .spin_line_select {
  animation: input_select 0.5s;
  animation-fill-mode: forwards;
}
@keyframes input_select {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

.input_span .spin_line_unselect {
  animation: input_unselect 0.5s;
  animation-fill-mode: forwards;
}
@keyframes input_unselect {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

.icon_tip_span .label_small {
  animation: label_select 0.3s;
  animation-fill-mode: forwards;
}
@keyframes label_select {
  0% {
    line-height: 60px;
    font-size: 20px;
    font-weight: 300;
  }
  100% {
    line-height: 16px;
    font-size: 16px;
    font-weight: 300;
  }
}

.icon_tip_span .label_large {
  animation: label_unselect 0.3s;
  animation-fill-mode: forwards;
}
@keyframes label_unselect {
  0% {
    line-height: 16px;
    font-size: 16px;
    font-weight: 300;
  }
  100% {
    line-height: 60px;
    font-size: 20px;
    font-weight: 300;
  }
}
.authcode_span {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.authcode_span .authcode_input_span {
  width: 160px;
  height: 40px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.authcode_span .authcode_input_span input {
  position: absolute;
  width: 160px;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  font-weight: 300;
  border: 0;
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style-type: none;
  outline: none;
  background: none;
}
.authcode_input_span > .label_tips {
  position: absolute;
  width: 160px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  font-weight: 300;
  cursor: pointer;
  border: 0;
  margin: 0;
  padding: 0;
}
.authcode_span .authcode_image_span {
  display: flex;
  align-items: center;
}
.authcode_span .authcode_image_span img {
  cursor: pointer;
}

.authcode_input_span .label_small {
  animation: authcode_label_select 0.3s;
  animation-fill-mode: forwards;
}
@keyframes authcode_label_select {
  0% {
    line-height: 40px;
    font-size: 20px;
    font-weight: 300;
  }
  100% {
    line-height: 0px;
    font-size: 16px;
    font-weight: 300;
    top: 0px;
  }
}

.authcode_input_span .label_large {
  animation: authcode_label_unselect 0.3s;
  animation-fill-mode: forwards;
}

@keyframes authcode_label_unselect {
  0% {
    line-height: 0px;
    font-size: 16px;
    font-weight: 300;
    top: 5px;
  }
  100% {
    line-height: 40px;
    font-size: 20px;
    font-weight: 300;
    top: 10px;
  }
}

.authcode_input_span > .spin_line {
  position: absolute;
  width: 0%;
  height: 1px;
  background: #f66d95;
  bottom: 10px;
  z-index: 4;
}

.authcode_input_span > .spin_line_select {
  animation: authCode_input_select 0.2s;
  animation-fill-mode: forwards;
}
@keyframes authCode_input_select {
  0% {
    width: 0%;
  }
  100% {
    width: 160px;
  }
}

.authcode_input_span > .spin_line_unselect {
  animation: authCode_input_unselect 0.2s;
  animation-fill-mode: forwards;
}
@keyframes authCode_input_unselect {
  0% {
    width: 160px;
  }
  100% {
    width: 0%;
  }
}

.error_span {
  color: #f66d95;
  font-size: 14px;
}
@media screen and (max-width: 1280px) {
  .login_container .left_container {
    display: flex;
    width: 60%;
    height: 100%;
  }
  .login_container .right_container {
    display: flex;
    justify-content: start;
    align-items: center;
    width: 40%;
    height: 100%;
  }
}

@media screen and (max-width: 960px) {
  .login_container .left_container {
    display: flex;
    width: 50%;
    height: 100%;
  }
  .login_container .right_container {
    display: flex;
    justify-content: start;
    align-items: center;
    width: 50%;
    height: 100%;
  }
}

@media screen and (max-width: 720px) {
  .login_container .left_container {
    display: none;
  }
  .login_container .right_container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
}
</style>